<template>
  <el-row>
    <el-col :span="24">
      <el-input placeholder="请输入其他企业的商品ID" v-model="queryList.goods_id" class="input-w" size="small" clearable />
      <el-button type="primary" class="ml10" size="small" @click="handleSearchGoods">
        <el-icon>
          <Search />
        </el-icon>
        搜索
      </el-button>
    </el-col>
  </el-row>
  <el-table
    ref="otherCorpGoodsRef"
    :data="dataList"
    v-loading="isloading"
    style="width: 100%"
    border
    class="mt10"
    max-height="400px"
    @row-click="handleRowClick"
    @select="handleSelect"
    @select-all="handleSelectAll"
  >
    <el-table-column type="selection" :width="55" :selectable="handleSelectAble" />
    <el-table-column label="海报预览" align="center">
      <template #default="{row}">
        <span @click.stop>
          <el-image
                  :src="row.imgurl_150"
                  :preview-src-list="imgSrcList"
                  :initial-index="initialIndex(row.imgurl_720)"
          />
        </span>
      </template>
    </el-table-column>
    <el-table-column label="商品ID" prop="goods_id" />
    <el-table-column label="商品名称" prop="goods_name" />
    <el-table-column label="商品货号" prop="goods_sn" />
    <el-table-column label="市场价">
      <template #default="{row}">
        {{row.market_price}} ￥
      </template>
    </el-table-column>
    <el-table-column label="实际售价">
      <template #default="{row}">
        {{row.goods_price}} ￥
      </template>
    </el-table-column>
    <el-table-column label="供应商" prop="supplier"></el-table-column>
    <el-table-column label="商品状态">
      <template #default="{row}">
        <el-tag type="success" size="mini" v-if="row.state == 1">上架</el-tag>
        <el-tag type="danger" size="mini" v-else>下架</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="创建时间">
      <template #default="{row}">
        {{row.ctime ? row.ctime.replace('T', ' ') : '--'}}
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
  import {reactive, ref, computed, inject, nextTick, defineExpose} from 'vue'
  import {getGoodsInfo} from "@/api/goods/goods";
  import {useStore} from 'vuex'
  import {ElMessage} from 'element-plus'

  const initialIndex = computed(() => {
    return (src) => {
      return imgSrcList.value.findIndex(d => d === src)
    }
  })

  const queryList = reactive({
    goods_id: undefined
  })
  const dataList = ref([])
  const isloading = ref(false)
  const store = useStore()
  const corpinfo = computed(() => {
    return store.getters.corpinfo
  })

  const goodsIds = inject('goodsIds')
  const relGoodsFormData = inject('relGoodsFormData')
  const goodsInfoList = inject('goodsInfoList')
  const otherCorpGoodsRef = ref(null)
  const imgSrcList = ref([])

  const handleSearchGoods = () => {
    isloading.value = true
    if (queryList.goods_id) {
      getGoodsInfo(queryList).then(response => {
        isloading.value = false
        if (response.errcode === 0) {
          if (response.data.corpid === corpinfo.value.corpid) {
            ElMessage({
              type: 'warning',
              message: '您输入的商品ID为本企业的商品，不能在其他企业商品中添加',
              duration: 2000
            })
          } else if (checkGoodsExists(response.data)) {
            dataList.value.unshift(response.data)
          }
          imgSrcList.value = []
          nextTick(() => {
            dataList.value.forEach(row => {
              if (goodsIds.value.includes(row.goods_id)) {
                otherCorpGoodsRef.value.toggleRowSelection(row, true)
              }else{
                otherCorpGoodsRef.value.toggleRowSelection(row, false)
              }
              if (row.imgurl_720) {
                imgSrcList.value.push(row.imgurl_720)
              }
            })
          })
        } else {
          ElMessage({
            type: 'error',
            message: '商品不存在',
            duration: 2000
          })
        }
      })
    } else {
      isloading.value = false
      ElMessage({
        type: 'warning',
        message: '请输入其他企业的商品ID',
        duration: 2000
      })
    }
  }

  const checkGoodsExists = (data) => {
    const index = dataList.value.findIndex(d => d.goods_id === data.goods_id)
    return index === -1
  }

  /** 点击单行 **/
  const handleRowClick = (row) => {
    if (!goodsIds.value.includes(row.goods_id)) {
      handleGetSelectedGoodsId(row)
      if (relGoodsFormData.datas.includes(row.goods_id)) {
        otherCorpGoodsRef.value.toggleRowSelection(row, true)
      } else {
        otherCorpGoodsRef.value.toggleRowSelection(row, false)
      }
    }
  }
  /** 选择数据行 **/
  const handleSelect = (selection, row) => {
    handleGetSelectedGoodsId(row)
  }
  /** 全选 **/
  const handleSelectAll = (selection) => {
    if (selection.length > 0) {
      selection.forEach(row => {
        if (!relGoodsFormData.datas.includes(row.goods_id)) {
          relGoodsFormData.datas.push(row.goods_id)
          goodsInfoList.value.push(row)
        }
      })
    } else {
      relGoodsFormData.datas = []
      goodsInfoList.value = []
    }
  }
  /** 获取选择的商品ID **/
  const handleGetSelectedGoodsId = (row) => {
    if (relGoodsFormData.datas.includes(row.goods_id)) {
      const index = relGoodsFormData.datas.findIndex(d => d == row.goods_id)
      relGoodsFormData.datas.splice(index, 1)
      goodsInfoList.value.splice(index, 1)
    } else {
      relGoodsFormData.datas.push(row.goods_id)
      goodsInfoList.value.push(row)
    }
  }

  const handleSelectAble = (row) => {
    return !goodsIds.value.includes(row.goods_id)
  }

  const init = () => {
    if(queryList.goods_id){
      handleSearchGoods()
    }
  }
  defineExpose({
    init
  })
</script>

<style scoped>

</style>
